<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webGl No1</title>
    <script src="js/three73.js"></script>
    <script src="js/Stats.js"></script>
    <script src="js/dat.gui.js"></script>
</head>
<body>
    <div id="WebGL-output"></div>
    <div id="Stats-output"></div>
    <script>
       window.onload = function () {
           var stats = initStats(); //调用stat函数
           var scene = new THREE.Scene(); //定义场景
           var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); //定义相机

           //定义渲染器
           var renderer = new THREE.WebGLRenderer();
           renderer.setClearColor(0xEEEEEE);
           renderer.setSize(window.innerWidth,window.innerHeight);

           renderer.shadowMapEnabled = true;

            //创建一个坐标轴
           var axex = new THREE.AxisHelper(20);
           scene.add(axex);

           //创建一个光源
           var spotLight = new THREE.SpotLight(0xffffff);
           spotLight.position.set(-40,60,20);
           spotLight.castShadow = true;  //该光源能产生阴影
           scene.add(spotLight);
           //创建一个环境光源
           var ambientLight = new THREE.AmbientLight(0x333333);
           scene.add(ambientLight);

           //创建一个平面
           var planeGeometry = new THREE.PlaneGeometry(40,20,1,1);
           var planeMeterial = new THREE.MeshLambertMaterial({color:0xcccccc});
           var plane = new THREE.Mesh(planeGeometry,planeMeterial);

           //定义平面的位置
           plane.rotation.x = -0.5*Math.PI;
           plane.position.x = 0;
           plane.position.y = -1;
           plane.position.z = 0;
           plane.receiveShadow = true;//接受阴影
           scene.add(plane);

           //创建一个方块
           var cubeGeometry = new THREE.CubeGeometry(10,6,8);
           var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000});
           var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);

           cube.position.x = -4;
           cube.position.y = 3.5;
           cube.position.z = 0;
           cube.castShadow = true; //投射阴影
           scene.add(cube);

           //创建四个圆环
           var torusGeometry = new THREE.TorusGeometry(1,0.5,12,18);
           var torusMeterial = new THREE.MeshLambertMaterial({color:0xff0000});
           var torus1 = new THREE.Mesh(torusGeometry,torusMeterial);
           var torus2 = new THREE.Mesh(torusGeometry,torusMeterial);
           var torus3 = new THREE.Mesh(torusGeometry,torusMeterial);
           var torus4 = new THREE.Mesh(torusGeometry,torusMeterial);

          /* torus1.position.x = -6;
           torus1.position.y = 0.4;
           torus1.position.z = 4;*/
           torus1.castShadow = true; //投射阴影

        /*   torus2.position.x = -2;
           torus2.position.y = 0.4;
           torus2.position.z = 4;*/
           torus2.castShadow = true;

          /* torus3.position.x = -6;
           torus3.position.y = 0.4;
           torus3.position.z = -4;*/
           torus3.castShadow = true;

          /* torus4.position.x = -2;
           torus4.position.y = 0.4;
           torus4.position.z = -4;*/
           torus4.castShadow = true;
           scene.add(torus1,torus2,torus3,torus4);

           /*camera.position.x = -30;
           camera.position.y = 40;
           camera.position.z = 30;
           camera.lookAt(scene.position);*/  //指向场景的中心

           //输出到页面
           document.getElementById('WebGL-output').appendChild(renderer.domElement);

           var controls = new function(){
               this.torus1PX = -7;
               this.torus1PY = 0.4;
               this.torus1PZ = 4;

               this.torus2PX = -1;
               this.torus2PY = 0.4;
               this.torus2PZ = 4;

               this.torus3PX = -7;
               this.torus3PY = 0.4;
               this.torus3PZ = -4;

               this.torus4PX = -1;
               this.torus4PY = 0.4;
               this.torus4PZ = -4;

               this.cameraPX = -30;
               this.cameraPY = 8;
               this.cameraPZ = 30;
           };

           var gui = new dat.GUI();
           /*gui.add(controls,'torus1PX',-10,10);
           gui.add(controls,'torus1PY',-10,10);
           gui.add(controls,'torus1PZ',-10,10);
           gui.add(controls,'torus2PX',-10,10);
           gui.add(controls,'torus2PY',-10,10);
           gui.add(controls,'torus2PZ',-10,10);
           gui.add(controls,'torus3PX',-10,10);
           gui.add(controls,'torus3PY',-10,10);
           gui.add(controls,'torus3PZ',-10,10);
           gui.add(controls,'torus4PX',-10,10);
           gui.add(controls,'torus4PY',-10,10);
           gui.add(controls,'torus4PZ',-10,10);*/
           gui.add(controls,'cameraPX',-100,100);
           gui.add(controls,'cameraPY',-100,100);
           gui.add(controls,'cameraPZ',-100,100);

           renderScene();

           function renderScene(){
               stats.update(); //实时更新
               torus1.position.x = controls.torus1PX;
               torus1.position.y = controls.torus1PY;
               torus1.position.z = controls.torus1PZ;

               torus2.position.x = controls.torus2PX;
               torus2.position.y = controls.torus2PY;
               torus2.position.z = controls.torus2PZ;

               torus3.position.x = controls.torus3PX;
               torus3.position.y = controls.torus3PY;
               torus3.position.z = controls.torus3PZ;

               torus4.position.x = controls.torus4PX;
               torus4.position.y = controls.torus4PY;
               torus4.position.z = controls.torus4PZ;

               camera.position.x = controls.cameraPX;
               camera.position.y = controls.cameraPY;
               camera.position.z = controls.cameraPZ;
               camera.lookAt(scene.position);

               requestAnimationFrame(renderScene);
               renderer.render(scene,camera);
           }

           function initStats(){  //初始化函数，定义具体位置
               var stats = new Stats();
               stats.setMode(0);
               stats.domElement.style.position = 'absolute';
               stats.domElement.style.left = '0px';
               stats.domElement.style.top = '0px';
               document.getElementById('Stats-output').appendChild(stats.domElement);
               return stats;
           }
       }
    </script>
</body>
</html>